<template>
	<view>
		<view class="coupon-item">
			<view class="coupon-money">
				<view class="nick" v-if="!types">满{{item.price}}使用</view>
				<view class="layof" :style="{color:theme}">￥{{item.money}}</view>
				<view class="end_time">{{item.end_date}}前使用</view>
				<view v-if="!types">
					<view class="tit">券号：{{item.code}}</view>
					<view class="demand">{{item.title}}</view>
				</view>
			</view>
			<view class="get-btn" v-if="item.status=='E'" :style="{color:'red', borderColor:'red', background:solid}">已经过期</view>
			<view class="get-btn" v-if="item.status=='X'" :style="{color:'grey', borderColor:'grey', background:solid}">已经使用</view>
			<view class="get-btn" v-if="item.status=='N' || item.status=='U'" :style="{color:color, borderColor:color, background:solid}" @click="showCode(item.codeImage)">立即使用</view>
		</view>
		<wyb-popup ref="popup" type="bottom" height="300" width="500" radius="0" :showCloseIcon="true">
			<view class="popup-content">
				<view style="margin-top: 120rpx; text-align: center">
					<tki-barcode ref="barcode" :val="item.code" />
				</view>
				<button style="margin-top: 50px;" type="primary" @click="confirmUsed(item)">确认已使用</button>
			</view>
		</wyb-popup>
	</view>
</template>

<script>
export default {
	components:{

	},
	data() {
		return {
		}
	},
	props:{
		item:{
			type: Object
		},
		types:{
			type: String,
			default: ''
		},
		theme:{
			type: String,
			default: '#ff9000'
		},
		solid:{
			type: String,
			default: '#ffffff'
		},
		color:{
			type: String,
			default: '#ff9000'
		},
	},
	methods: {
		showCode() {
			this.$refs.popup.show() // 显示
		},
		confirmUsed(item) {
			var that = this;
			this.$request({
				url: this.$config.url['product.use_my_coupon'] + "?id=" + item.id,
				success: function(res) {
					if (res.data.code == 0) {
						that.$refs.popup.hide() // 显示
						uni.showToast({
							title: '确认成功'
						})
						item.status = 'U'
					}
				}
			});
		}
	}
}
</script>

<style lang='scss'>
.coupon-item {
	width:95%; margin: 0 auto; height:auto; display:table; border-radius:10upx; padding:0 20upx; margin-top:22upx; border:1px solid #eeeeee; position:relative;
	.coupon-money {
		width:465upx; height:auto; display:table; float:left; padding:26upx 0; border-style:none dotted none none; border-color:#eeeeee;
		
		.nick { width:100%; height:50upx; line-height:30upx; font-size:12; color:grey; }
		.tit { width:100%; height:50upx; line-height:50upx; font-size:12; color:grey; }
		.demand { width:100%; height:30upx; line-height:30upx; font-size:12; color:grey; }
		
		.layof { width:100%; height:48upx; line-height:30upx; font-size:44upx; color:#ff9000; font-weight:bold; }
		.end_time { width:100%; height:30upx; line-height:30upx; font-size:$font-sm; color:grey; }
	}
	.get-btn { width:146upx; height:52upx; line-height:50upx; position:absolute; top:50%; right:26upx; margin-top:-26upx; text-align:center; border-radius:60upx; color:#ff9000; border:1px solid #ff9000; font-size:$font-sm; float:right; }
}
.coupon-item:after { width:40upx; height:20upx; position:absolute; left:460upx; top:-1px; border-radius:0 0 40upx 40upx; content:""; display:block; background:white; border:1px solid #eeeeee; border-top:0px; }
.coupon-item:before { width:40upx; height:20upx; position:absolute; left:460upx; bottom:-1px; border-radius:40upx 40upx 0 0; content:""; display:block; background:white; border:1px solid #eeeeee; border-bottom:0px; }
</style>